<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('5') // 默认选中首页
const activeSubNav = ref('0')

const form = ref({
  name: '',
  phone: '',
  email: '',
  message: ''
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}
const submitForm = () => {
  console.log('表单提交数据:', form.value);
  // 这里添加表单提交逻辑，例如API调用
  // axios.post('/api/submit', form.value)
  //   .then(response => {
  //     console.log('提交成功', response);
  //   })
  //   .catch(error => {
  //     console.error('提交失败', error);
  //   });
};


// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>
    <!--中间内容-->
    <!-- 顶部背景区块 -->
    <div class="section section1">
      <img
          src="@/assets/images/location.png"
          class="section1-image"
          alt="主视觉图"
      >
      <span>保护营商环境&nbsp;&nbsp;助力知产强国</span>
    </div>


    <div class="section section2">
      <span class="contactUsChinese">联系我们</span>
      <span class="contactUs">contact us</span>
      <div class="informationContain">
        <img src="@/assets/images/地址.svg" class="contactAddress" alt="contactAddress">
        <img src="@/assets/images/电话 拨打电话.svg" class="contactPhone" alt="contactPhone">
        <img src="@/assets/images/邮箱.svg" class="contactEmail" alt="contactEmail">
<!--        <span class="infoHead infoAddressHead">知优总部</span>-->
        <span class="infoContent infoAddressContent">杭州滨江慧港科技园1幢</span>
<!--        <span class="infoHead infoPhoneHead">联系电话</span>-->
        <span class="infoContent infoPhoneContent">180-5717-7208</span>
<!--        <span class="infoHead infoEmailHead">电子邮箱</span>-->
        <span class="infoContent infoEmailContent">1422285411@qq.com</span>

      </div>
      <img src="@/assets/images/contactAddressImg.png" class="contactAddressImg" alt="contactAddressImg">
    </div>


    <div class="section section7">
      <span class="corporateCultureChinese">企业文化</span>
      <span class="corporateCulture">corporate culture</span>
      <div class="corporateCultureContainer1">
        <span class="corporateCultureTitle corporateCultureTitle1">
          使命
        </span>
        <span class="corporateCultureContent corporateCultureContent1">
          保护知产环境 助力知产强国
        </span>
      </div>
      <div class="corporateCultureContainer2">
        <span class="corporateCultureTitle corporateCultureTitle2">
          愿景
        </span>
        <span class="corporateCultureContent corporateCultureContent2">
          成为中国首选全链路知识产权法商服务平台
        </span>
      </div>
      <div class="corporateCultureContainer3">
        <span class="corporateCultureTitle corporateCultureTitle3">
          价值观
        </span>
        <span class="corporateCultureContent corporateCultureContent3">
          客户第一 服务至上    行有不得 反求诸己
          积极应变 容错创新    此时此刻 舍我其谁
          简单信任 合作共赢    全力以赴 水滴石穿
        </span>
      </div>
    </div>

    <div class="section section3">
      <span class="section3Title">有合作意向或还有其他疑问请留言</span>
      <form class="contact-form" @submit.prevent="submitForm">
        <div class="form-group group-name" >
          <span class="requireName">*</span>
          <input
              type="text"
              v-model="form.name"
              placeholder="您的姓名"
              class="form-input name"
          >
        </div>
        <div class="form-group group-phone">
          <span class="requirePhone">*</span>
          <input
              type="tel"
              v-model="form.phone"
              placeholder="联系电话"
              class="form-input phone"
          >
        </div>
        <div class="form-group group-email">
          <input
              type="email"
              v-model="form.email"
              placeholder="电子邮箱"
              class="form-input email"
          >
        </div>
        <div class="form-group group-message">
    <textarea
        v-model="form.message"
        placeholder="请输入您的留言，您的意见对我们来说非常宝贵"
        class="form-textarea"
        rows="4"
    ></textarea>
        </div>
        <button type="submit" class="submit-btn">确认提交</button>
      </form>
    </div>
    <div class="section section8">
      <span class="cooperativePartnerChinese">合作伙伴</span>
      <span class="cooperativePartner">Cooperative partner</span>
      <div class="cooperativePartnerImgContainer">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg1.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg2.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg3.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg4.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg5.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg6.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg7.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg8.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg9.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg10.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg11.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg12.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg13.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg14.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg15.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg16.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg17.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg18.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg19.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg20.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg21.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg22.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg23.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg24.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg25.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg26.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg27.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg28.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
      </div>
    </div>


    <!--底部内容-->
    <Bottom/>
  </div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}

/*中间内容*/
.section1 {

  height: 720px;
  width: 100%; /* 确保宽度100% */
  background-image: url('@/assets/bk/contactUsSection.png'); /* 替换为实际图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section1-image {
  position: absolute;
  top: 274px;
  left: 507px;
  max-width: 1200px;
  z-index: 2;
}

.section1 span {
  position: absolute;
  top: 390px;
  left: 651px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 50px;
  line-height: 60px;
  white-space: nowrap;
  z-index: 3;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(255, 67, 0, 0.4); /* 增强阴影效果 */

}

.section7 {
  width: 100%;
  height: 432px;
  background-color: #101010;
  background-image: url('@/assets/bk/section7.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.corporateCultureChinese {
  position: absolute;
  top: 40px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.corporateCulture {
  position: absolute;
  top: 62px;
  left: 817px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.corporateCultureContainer1 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer2 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 260px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer3 {
  position: absolute;
  width: 588px;
  height: 208px;
  background-image: url('@/assets/images/corporateCultureContainerbk2.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 972px; /* 距离父容器左边距离 */
}

.corporateCultureTitle {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 32px;
  line-height: 45px;
  color: #FFFFFF;
  font-style: normal;
  font-weight: 400;
}

.corporateCultureTitle1 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle2 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle3 {
  position: absolute;
  top: 82px;
  left: 32px;
}

.corporateCultureContent {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
  font-weight: 200;
}

.corporateCultureContent1, .corporateCultureContent2 {
  position: absolute;
  top: 31px;
  left: 104px;
  width: 452px;
  height: 30px;
}

.corporateCultureContent3 {
  position: absolute;
  top: 26px;
  left: 152px;
  width: 382px;
  height: 156px;
  line-height: 52px;
}

.section8 {
  width: 100%;
  height: 668px;
  background-color: #101010;
  background-image: url('@/assets/bk/section8.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.cooperativePartnerChinese {
  position: absolute;
  top: 80px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.cooperativePartner {
  position: absolute;
  top: 102px;
  left: 817px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.cooperativePartnerImgContainer {
  position: absolute;
  width: 1204px;
  height: 390px;
  top: 212px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
  /* border: #FF6600 solid 1px; */
}

.cooperativePartnerImg {
  width: 166px;
  height: 88px;
  object-fit: contain;
  margin-right: 6px;
  margin-bottom: 8px;
}

.section2 {
  width: 100%;
  height: 668px;
  position: relative;
}

.contactUsChinese {
  position: absolute;
  top: 40px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.contactUs {
  position: absolute;
  top: 62px;
  left: 886px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.section3 {
  width: 100%;
  height: 596px;
  position: relative;
}
.section3Title {
  position: absolute;
  height: 56px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  line-height: 56px;
  text-align: center;
  font-style: normal;
  top: 80px;
  left: 665px;
}

.contact-form {
  position: absolute;
  top: 176px;
  left: 360px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* border: 1px solid #FFFFFF; */
  width: 1200px;
}



.form-group {
  position: relative; /* 为必填标记提供定位上下文 */
  display: inline-block;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 12px;
  border: 1px solid #FFFFFF;
  width: 384px;
  height: 80px;
  
}

.form-input {

  height: 40px;
  width: 340px;
  color: #FFFFFF;
  font-size: 28px; /* 调整为与placeholder相同的字体大小 */
  background: transparent;
  border: none; /* 去除边框 */
  outline: none; 
  /* border: #FF6600 solid 1px; */
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  
}

.requireName {
  position: absolute;
  font-size: 28px;
  color: #E73737;
  top: 20px;
  left: 10px;
}
.requirePhone {
  position: absolute;
  font-size: 28px;
  color: #E73737;
  top: 20px;
  left: 10px;
}

.form-input.name {
  left: 28px;
  
}

.form-input.phone {
  left: 28px;
}
/* .form-input.email {
  width: 380px;
  height: 80px;

} */
.form-input::placeholder {
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
}
.group-message {
  width: 1200px;
  height: 224px;
}


.form-textarea {
  background: transparent;
  border-radius: 12px;
  /* border: 1px solid #FFFFFF; */
  color: #FFFFFF;
  width: 1166px;
  height: 200px;
  font-size: 28px;
  border: none; /* 去除边框 */
  outline: none;
  resize: none;
  position: absolute;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  top: 20px;
  left: 24px;
}
.form-textarea::placeholder{
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
}


.submit-btn {
  position: relative; /* 相对父容器定位 */
  width: 240px;
  height: 64px;
  background: linear-gradient(90deg, #FFB23D 0%, #FF6600 100%);
  box-shadow: 0px 0px 8px 2px rgba(255,102,0,0.6);
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: AlibabaPuHuiTi_2_105_Heavy;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 33px;
  text-align: center;
  font-style: normal;
  left: 480px;
}




.informationContain {
  width: 440px;
  height: 404px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 26px;
  border: 1px solid #FFFFFF;
  position: absolute;
  top: 184px;
  left: 360px;
}

.contactAddress {
  position: absolute;
  top: 60px;
  left: 32px;
  width: 40px;
}

.contactPhone {
  position: absolute;
  top: 185px;
  left: 32px;
  width: 40px;
}

.contactEmail {
  position: absolute;
  top: 305px;
  left: 32px;
  width: 40px;
}

.infoHead {
  position: absolute;
  width: 104px;
  height: 36px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 37px;
  text-align: left;
}

.infoAddressHead {
  top: 44px;
  left: 94px;
}

.infoPhoneHead {
  top: 164px;
  left: 94px;
}

.infoEmailHead {
  top: 284px;
  left: 94px;
}

.infoContent {
  position: absolute;
  width: 314px;
  height: 36px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 37px;
  text-align: left;
}

.infoAddressContent {
  top: 65px;
  left: 94px;
}

.infoPhoneContent {
  top: 185px;
  left: 94px;
}

.infoEmailContent {
  top: 305px;
  left: 94px;
}


.contactAddressImg {
  position: absolute;
  top: 184px;
  left: 820px;
}
</style>